<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
  <style media="screen">
    #view{
      width: 200;
      height: 100;
      overflow: hidden;
      position: absolute;
    }
    .aa{
      background: #eee;
      width: 200;
      height: 100;
      left: 0;
      position: absolute;
    }
    .bb{
      background: SkyBlue;
      width: 200;
      height: 100;
      left: 200;
      position: absolute;
    }
    .cc{
      background: #263;
      width: 200;
      height: 100;
      left: 400;
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="view">
    <div class="aa" :style="[sty1]" @click="vm.click1()">
      AAA
    </div>
    <div class="bb" :style="[sty2]" @click="vm.click1()">
      BBB
    </div>
    <div class="cc" :style="[sty3]" @click="vm.click1()">
      CCC
    </div>

  </div>

  <script type="text/javascript">
  var vm = new Vue({
    el:'#view',
    data:{
      le:0,
      section:0,
      section2:0,
      left:0,
      sty1:{
        left:this.le
      },
      sty2:{
        left:this.le+200
      },
      sty3:{
        left:this.le+400
      },
    },
    methods:{
      click1(){
        //解决连续点击造成的错误
        if (this.le % 200 != 0) {
          return;
        }
        //控制方向
        if (this.le === -400) {
          this.section = -20;
          this.section2 = 200;
        }else if(this.le === 0){
          this.section = 20;
          this.section2 = -200;
        }
        this.left = this.le + this.section2;
        // 实现
        const timer = setInterval(()=>{
          this.le -= this.section;
          this.sty1.left = this.le;
          this.sty2.left = this.le + 200;
          this.sty3.left = this.le + 400;

          if (this.le === this.left) {
            window.clearInterval(timer);
          }
        },100);
      }
    }
  });

  </script>
</body>

</html>
